<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>日夜交替</title>
		<!-- <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
		<link href="./css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="">
	</head>
	<style>
		body {
		    margin: 0;
		    padding: 0;
		}
		
		#container {
		    height: 100vh;
		}
		
		.bg {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		}
		
		.sun {
		    margin: 0;
		    padding: 0;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    width: 600px;
		    height: 600px;
		    background-color: orange;
		    border-radius: 50%;
		}
		
		.moon {
		    margin: 0;
		    padding: 0;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(calc(-50% + -160px), calc(-50% + -180px));
		    width: 600px;
		    height: 600px;
		    box-shadow: 160px 180px 0 cyan;
		    border-radius: 50%;
		}
		
		.sea {
		    position: absolute;
		    bottom: 0;
		    width: 100%;
		    height: 35%;
		    backdrop-filter: blur(100px);
		    -webkit-backdrop-filter: blur(100px);
		    z-index: 100;
		}
		
		.sun,
		.moon,
		.sun-box,
		.moon-box,
		.bg {
		    transition: all 1s ease-in-out;
		}
		
		.sun-box,
		.moon-box {
		    position: relative;
		    overflow: hidden;
		}
		
		.light .sun-box {
		    height: 100%;
		}
		
		.light .moon-box {
		    height: 0;
		}
		
		.light .bg {
		    background-color: #ffeea2;
		}
		
		.dark .sun-box {
		    height: 0;
		}
		
		.dark .moon-box {
		    height: 100%;
		}
		
		.dark .bg {
		    background-color: #040720;
		}
		
		.btn-box {
		    position: absolute;
		    top: 5px;
		    left: 5px;
		    z-index: 101;
		    display: flex;
		    flex-direction: row;
		}
		
		.btn-box div {
		    background: rgba(255, 255, 255, 0.7);
		    color: #000;
		    width: 90px;
		    height: 40px;
		    line-height: 40px;
		    text-align: center;
		    margin: 5px;
		    font-size: 14px;
		    border-radius: 5px;
		    cursor: pointer;
		}
		
		.btn-box div:hover {
		    background: #fff;
		}
	</style>

	<body>
		<div class="btn-box">
			<div onclick="change('light')">
				<i class="fa fa-sun-o" aria-hidden="true"></i> 日间
			</div>
			<div onclick="change('dark')">
				<i class="fa fa-moon-o" aria-hidden="true"></i> 夜间
			</div>
		</div>
		<div class="dark" id="container">
			<div class="bg"></div>
			<div class="moon-box">
				<div class="moon"></div>
			</div>
			<div class="sun-box">
				<div class="sun"></div>
			</div>
			<div class="sea"></div>
		</div>
	</body>
	<script>
		function change(str){
		    document.getElementById('container').setAttribute('class',str);
		}
	</script>
</html>